<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        border: 1px solid;
      }
    </style>
  </head>

  <body>
    <img id="source" src="./image.jpg" width="300" height="227" />
    <canvas width="400" height="400" id="canvas"> 请升级你的服务器 </canvas>
    <script>
      var canvas = document.querySelector("#canvas");
      var context = canvas.getContext("2d");
      function drawBeziLine(x1, y1, x2, y2, height = 200) {
        context.beginPath();
        context.moveTo(0, height);
        context.bezierCurveTo(x1, y1, x2, y2, 400, height);
        context.lineTo(400, 400);
        context.lineTo(0, 400);
        context.closePath();
        context.fillStyle = "rgba(0,191,255,0.6)";
        context.fill();
      }
      function drawInit() {
        var x1 = 100,
          y1 = 100,
          x2 = 300,
          y2 = 300,
          signY1 = Math.random()>0.5?1:-1,
          signY2 = Math.random()>0.5?1:-1,
          signX1 = Math.random()>0.5?1:-1,
          signX2 = Math.random()>0.5?1:-1,
          speed = 1;
        setInterval(() => {
          y1 += speed * signY1;
          y2 += speed * signY2;
          x1 += speed * signX1;
          x2 += speed * signX2;
          if (x1 > 200 || x1 < 0) {
            signX1 = signX1 * -1;
          }
          if (x2 > 400 || x2 < 200) {
            signX2 = signX2 * -1;
          }
          if (y1 > 300 || y1 < 100) {
            signY1 = signY1 * -1;
          }
          if (y2 > 300 || y2 < 100) {
            signY2 = signY2 * -1;
          }
          context.clearRect(0, 0, 400, 400);
          drawBeziLine(x1, y1, x2, y2);
        }, 16.7);
      }
      drawInit();
      // }
    </script>
  </body>
</html>
